<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">仓库新建</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm(type)"
                    >确定</el-button>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" label-width="140px" class="mt30" v-loading="loading">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="新建类型:">
                            <el-select v-model="type" style="width:100%;" placeholder="请选择" @change="onChangeType">
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="showType == 1">
                    <el-col :span="12" class="mt30">
                        <el-form-item label="仓库编码:" prop="code">
                            <el-input v-model="form.code" placeholder="系统自动生成" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="仓库名称:" prop="name">
                            <el-input v-model="form.name" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="物理位置:" prop="address">
                            <el-input v-model="form.address" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="库管员:" prop="warehouseClerks">
                            <el-select v-model="form.warehouseClerks" multiple placeholder="" style="width:100%;">
                                <el-option
                                    v-for="item in userList"
                                    :key="item.userName"
                                    :label="item.userName"
                                    :value="item.userName"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="是否启用仓位管理:" prop="openPosition">
                            <el-select v-model="form.openPosition" placeholder="请选择" style="width:100%;">
                                <el-option label="是" value="0">是</el-option>
                                <el-option label="否" value="1">否</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="form.remark" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="showType == 2">
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="仓库选择:" prop="parentId">
                                <el-select v-model="form.parentId" style="width:100%;" placeholder="请选择">
                                    <el-option
                                        v-for="item in queryWarehouse"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="区域编码:" prop="code">
                            <el-input v-model="form.code" placeholder="系统自动生成" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="区域名称:" prop="name">
                            <el-input v-model="form.name" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="showType == 3">
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="仓库选择:">
                                <el-select v-model="warehouse" style="width:100%;" placeholder="请选择" @change="onChangeWarehouse">
                                    <el-option
                                        v-for="item in queryWarehouse"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区域选择:" prop="parentId">
                                <el-select v-model="form.parentId" style="width:100%;" placeholder="请选择">
                                    <el-option
                                        v-for="item in areaList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="货架编码:" prop="code">
                            <el-input v-model="form.code" placeholder="系统自动生成" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="货架名称:" prop="name">
                            <el-input v-model="form.name" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="showType == 4">
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="仓库选择:">
                                <el-select v-model="warehouse" style="width:100%;" placeholder="请选择" @change="onChangeWarehouse">
                                    <el-option
                                        v-for="item in queryWarehouse"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区域选择:" prop="area">
                                <el-select v-model="area" style="width:100%;" placeholder="请选择" @change="onChangeArea">
                                    <el-option
                                        v-for="item in areaList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="货架选择:" prop="parentId">
                                <el-select v-model="form.parentId" style="width:100%;" placeholder="请选择">
                                    <el-option
                                        v-for="item in shelvesList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="共有层数:" prop="hierarchy">
                                <el-select v-model="form.hierarchy" style="width:100%;" placeholder="请选择">
                                    <el-option
                                        v-for="item in numList"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row v-if="showType == 5">
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="仓库选择:">
                                <el-select v-model="warehouse" style="width:100%;" placeholder="请选择" @change="onChangeWarehouse">
                                    <el-option
                                        v-for="item in queryWarehouse"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="区域选择:" prop="area">
                                <el-select v-model="area" style="width:100%;" placeholder="请选择" @change="onChangeArea">
                                    <el-option
                                        v-for="item in areaList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24" class="mt30">
                        <el-col :span="12">
                            <el-form-item label="货架选择:" prop="shelves">
                                <el-select v-model="shelves" style="width:100%;" placeholder="请选择" @change="onChangeShelves">
                                    <el-option
                                        v-for="item in shelvesList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="层级选择:" prop="parentId">
                                <el-select v-model="form.parentId" style="width:100%;" placeholder="请选择">
                                    <el-option
                                        v-for="item in hierarchyList"
                                        :key="item.warehouseId"
                                        :label="item.name"
                                        :value="item.warehouseId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="12" class="mt30">
                        <el-form-item label="共有仓位数:" prop="position">
                            <el-select v-model="form.position" style="width:100%;" placeholder="请选择">
                                <el-option
                                    v-for="item in numList"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { queryWarehouse, warehouseList, warehouseAdd } from "@/api/system/warehouse/warehouse"
import { listUser } from "@/api/system/setting/user/user"
export default {
    name: "warehouseAdd",
    data() {
        return {
            loading: false,
            type: '1',
            form: {
                openPosition: '1',
                warehouseClerks: []
            },
            showType: 1,
            typeList: [
                {
                    label: '建仓库',
                    value: '1'
                },
                {
                    label: '建区域',
                    value: '2'
                },
                {
                    label: '建货架',
                    value: '3'
                },
                {
                    label: '建层级',
                    value: '4'
                },
                {
                    label: '建仓位',
                    value: '5'
                }
            ],
            numList: [
                {value: '1'},
                {value: '2'},
                {value: '3'},
                {value: '4'},
                {value: '5'},
                {value: '6'},
                {value: '7'},
                {value: '8'},
                {value: '9'}
            ],
            warehouse: '', // 仓库
            area: '', // 区域
            shelves: '', // 货架
            userList: [], // 用户列表
            queryWarehouse: [], // 仓库
            warehouseList: [], // 仓库列表
            areaList: [], // 区域列表
            shelvesList: [], // 货架列表
            hierarchyList: [], // 层级列表
        }
    },
    created() {
        this.getUser()
    },
    methods: {
        // 获取用户
        getUser(){
            listUser().then(res => {
                this.userList = res.rows
            })
        },
        // 获取仓库
        getWarehouse(){
            queryWarehouse().then(res => {
                this.queryWarehouse = res.data
            })
        },
        // 获取仓库列表
        getWarehouseList(){
            warehouseList().then(res => {
                this.warehouseList = res.data[0].children
            })
        },
        onChangeType(e){
            this.form = {}
            if(e == "1"){
                this.showType = 1
                this.type = '1'
            }else if(e == '2'){
                this.showType = 2
                this.type = '2'
                this.getWarehouse()
            }else if(e == "3"){
                this.showType = 3
                this.type = '3'
                this.getWarehouse()
                this.getWarehouseList()
            }else if(e == '4'){
                this.showType = 4
                this.type = '4'
                this.getWarehouse()
                this.getWarehouseList()
            }else{
                this.showType = 5
                this.type = '5'
                this.getWarehouse()
                this.getWarehouseList()
            }
        },
        // 仓库匹配区域
        onChangeWarehouse(e){
            let arr = this.warehouseList.find(item => item.warehouseId == e)
            this.areaList = arr.children
            this.form = {}
        },
        // 区域匹配货架
        onChangeArea(e){
            let arr = this.areaList.find(item => item.warehouseId == e)
            this.shelvesList = arr.children
        },
        // 货架匹配层数
        onChangeShelves(e){
            let arr = this.shelvesList.find(item => item.warehouseId == e)
            this.hierarchyList = arr.children
        },
        submitForm(type){
            // console.log(this.form)
            if(type == '1'){
                if(this.form.name == '' || this.form.name == null || this.form.name == undefined){
                    this.$modal.msgError('仓库名称不能为空！')
                }else if(this.form.warehouseClerks.length == 0){
                    this.$modal.msgError('请选择库管员！')
                }else{
                    this.getWarehouseSubmit(this.form)
                }
            }else if(type == '2'){
                if(this.form.parentId == '' || this.form.parentId == null || this.form.parentId == undefined){
                    this.$modal.msgError('请选择仓库！')
                }else if(this.form.name == '' || this.form.name == null || this.form.name == undefined){
                    this.$modal.msgError('区域名称不能为空！')
                }else{
                    this.getWarehouseSubmit(this.form)
                }
            }else if(type == '3'){
                if(this.warehouse == '' || this.warehouse == null || this.warehouse == undefined){
                    this.$modal.msgError('请选择仓库！')
                }else if(this.form.parentId == '' || this.form.parentId == null || this.form.parentId == undefined){
                    this.$modal.msgError('请选择区域！')
                }else if(this.form.name == '' || this.form.name == null || this.form.name == undefined){
                    this.$modal.msgError('货架名称不能为空！')
                }else{
                    this.getWarehouseSubmit(this.form)
                }
            }else if(type == '4'){
                if(this.warehouse == '' || this.warehouse == null || this.warehouse == undefined){
                    this.$modal.msgError('请选择仓库！')
                }else if(this.area == '' || this.area == null || this.area == undefined){
                    this.$modal.msgError('请选择区域！')
                }else if(this.form.parentId == '' || this.form.parentId == null || this.form.parentId == undefined){
                    this.$modal.msgError('请选择货架！')
                }else if(this.form.hierarchy == '' || this.form.hierarchy == null || this.form.hierarchy == undefined){
                    this.$modal.msgError('请选择层数！')
                }else{
                    this.getWarehouseSubmit(this.form)
                }
            }else if(type == '5'){
                if(this.warehouse == '' || this.warehouse == null || this.warehouse == undefined){
                    this.$modal.msgError('请选择仓库！')
                }else if(this.area == '' || this.area == null || this.area == undefined){
                    this.$modal.msgError('请选择区域！')
                }else if(this.shelves == '' || this.shelves == null || this.shelves == undefined){
                    this.$modal.msgError('请选择货架！')
                }else if(this.form.parentId == '' || this.form.parentId == null || this.form.parentId == undefined){
                    this.$modal.msgError('请选择层级！')
                }else if(this.form.position == '' || this.form.position == null || this.form.position == undefined){
                    this.$modal.msgError('请选择仓位数！')
                }else{
                    this.getWarehouseSubmit(this.form)
                }
            }
        },
        getWarehouseSubmit(e){
            this.loading = true
            warehouseAdd(e).then(res => {
                if(res.code == 200){
                    this.loading = false
                    this.form = {
                        openPosition: '0',
                        warehouseClerks: []
                    }
                    this.warehouse = ''
                    this.area = ''
                    this.shelves = ''
                    this.$modal.msgSuccess("新建成功")
                }else {
                    this.loading = false
                    this.$modal.msgError(res.msg)
                }
            })
        }
    }
}
</script>
